<template>
  <Card v-bind="$attrs">
    <div
      style="
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        gap: 16px;
      "
    >
      <div>
        <a-tabs v-model:active-key="activeKey" @change="onTabChange">
          <a-tab-pane tab="每日采集量" key="tab1" />
          <a-tab-pane tab="每小时采集量" key="tab2" />
        </a-tabs>
      </div>
      <div>
        <a-select
          v-model:value="selectedDevice"
          style="width: 200px; margin-right: 10px"
          placeholder="选择设备"
          @change="onDeviceChange"
          show-search
          :filter-option="
            (inputValue, option) =>
              option.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
          "
        >
          <a-select-option value="0"> 全部 </a-select-option>
          <a-select-option
            v-for="device in deviceList"
            :key="device.deviceMac"
            :value="device.deviceMac"
          >
            {{ device.deviceIp }}
          </a-select-option>
        </a-select>
        <a-select
          v-model:value="selectedNode"
          style="width: 200px; margin-right: 10px"
          placeholder="选择节点"
          @change="onNodeChange"
          :disabled="selectedDevice == '' || selectedDevice == '0'"
          show-search
          :filter-option="
            (inputValue, option) =>
              option.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
          "
        >
          <a-select-option value="0"> 全部 </a-select-option>
          <a-select-option v-for="node in nodeList" :key="node.node" :value="node.node">
            {{ node.node }}
          </a-select-option>
        </a-select>
        <!-- <a-select
          v-model:value="timeInterval"
          style="width: 120px"
          @change="onTimeIntervalChange"
          show-search
          :filter-option="
            (inputValue, option) =>
              option.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
          "
        >
          <a-select-option value="30min">30分钟</a-select-option>
          <a-select-option value="1h">1小时</a-select-option>
          <a-select-option value="12h">12小时</a-select-option>
          <a-select-option value="1day">1天</a-select-option>
        </a-select> -->
      </div>
    </div>
    <p v-if="activeKey === 'tab1'">
      <VisitAnalysis :daylog="echartList.dayLogs" />
    </p>
    <p v-if="activeKey === 'tab2'">
      <VisitAnalysis :daylog="echartList.hourLogs" />
    </p>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card, Radio, Select } from 'ant-design-vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import {
    getNodeCollectionCountAPI,
    getDeviceListAPI,
    getNodeListAPI,
    analysisGetDataAPI,
    getcollectioncount,
    getEchartAPI,
  } from '@/api/demo/analysis';
  import { deletecount } from '@/api/demo/script';
  import { http } from '@/utils/http/axios';

  const activeKey = ref('tab1'); // 默认选择单机
  const timeInterval = ref('1day'); // 默认时间间隔为30分钟
  const selectedDevice = ref('0'); // 选中的设备
  const selectedNode = ref('0'); // 选中的节点
  const deviceList = ref([]); // 设备列表
  const nodeList = ref([]); // 节点列表
  const { t } = useI18n();
  const tabListTitle = [
    {
      key: 'tab1',
      tab: t('sys.analysis.every5'),
    },
    {
      key: 'tab2',
      tab: t('sys.analysis.omniHora'),
    },
  ];
  onMounted(() => {
    fetchDeviceList();
    allInterval();
  });
  const allInterval = () => {
    getcollectioncount().then((res) => {
      echartList.value = res.data;
    });
  };
  // 获取设备列表
  const fetchDeviceList = async () => {
    try {
      const response = await getDeviceListAPI();
      deviceList.value = response.data || [];
      // 如果有设备且没有选中的设备，默认选择第一个
      if (deviceList.value.length > 0 && !selectedDevice.value) {
        // selectedDevice.value = deviceList.value[0].deviceMac;
        // 获取该设备下的节点列表
        await fetchNodeList(deviceList.value[0].deviceMac);
      }
    } catch (error) {
      console.error('获取设备列表失败:', error);
    }
  };

  // 获取节点列表
  const fetchNodeList = async (mac) => {
    try {
      const response = await getNodeListAPI(mac);
      nodeList.value = response.data || [];
      // 如果有节点且没有选中的节点，默认选择第一个
      if (nodeList.value.length > 0 && !selectedNode.value) {
        // selectedNode.value = nodeList.value[0].node;
      }
    } catch (error) {
      console.error('获取节点列表失败:', error);
    }
  };
  const echartList = ref({});
  function onTabChange(key) {
    activeKey.value = key;
  }
  function onNodeChangedeviceMac() {
    if (selectedDevice.value != null && (selectedNode.value == null || selectedNode.value == 0)) {
      deletecount(selectedDevice.value).then((res) => {
        echartList.value = res.data;
      });
    } else if (
      selectedDevice.value != null &&
      selectedNode.value != null &&
      selectedNode.value != 0
    ) {
      getNodeCollectionCountAPI(selectedDevice.value, selectedNode.value).then((res) => {
        echartList.value = res.data;
      });
    }
  }
  function onDeviceChange(value) {
    selectedDevice.value = value;
    selectedNode.value = null;
    // 切换设备时重新获取节点列表
    if (value == 0) {
      allInterval();
    } else {
      fetchNodeList(value);
      onNodeChangedeviceMac();
    }
  }

  function onNodeChange(value) {
    selectedNode.value = value;
    if (value == 0) {
      onNodeChangedeviceMac();
      return;
    } else {
      onNodeChangedeviceMac();
    }
  }

  function onTimeIntervalChange(value) {
    timeInterval.value = value;
  }

  // 组件挂载时获取设备列表
  onMounted(() => {
    fetchDeviceList();
  });
</script>
